import React,{Fragment, useState,useEffect} from 'react'
import { useHistory } from 'react-router-dom';
import {Pagination,Icon,WhiteSpace,WingBlank,Card} from 'antd-mobile'
import {Spin,Tag} from 'antd'
import {request} from '../../../../network/request'

const SearchPeople = (props) => {
    
    let history = useHistory()
    
    const [isloading,setisloading] = useState(false) 
    const [people,setpeople] = useState([])  
    const [totalpage,settotalpage] = useState(1)  
    const [keyword,setkeyword] = useState('')
    const [page,setpage] =useState(1)

    useEffect(()=>{
     
        setpeople(props.tab.data)
        settotalpage(props.tab.totalpage)
        setkeyword(props.keyword)
        
         
      },[])

    const on_page_change = (page) => {
        setisloading(true)
        request({
            url:`/search/${keyword}/${page}/15`
        }).then(res=>{
            setpeople(res.data.people.list) 
            setisloading(false)
            setpage(page)
        })
    }

    const onCardClick = (id) =>{
        history.push(`/main/home/people/${id}`)
    }


    return (
        <Fragment>
            <Spin spinning={isloading}>
                <div className="search-people">
                    {people.map(item=>{
                        return (
                            <WingBlank size="lg" key={item.id}>
                                <WhiteSpace size="lg" />
                                <Card onClick={()=>onCardClick(item.id)}>
                                <Card.Header
                                    
                                    thumb={item.picture}
                                    thumbStyle={{height:'100px',}}
                                    extra={<div >{item.name}</div>}
                                />
                                <Card.Body>
                                    
                                {/* <img style={{height:'40px' , lineHeight:'40px' , marginRight:'10px' }} src={current_city_flag}/> */}
                                    
                                <span> {item.country} {item.identity}</span>
                                </Card.Body>
                            
                                </Card>
                                <WhiteSpace size="lg" />
                            </WingBlank>
                            )
                        })}
                </div>

            <Pagination total={totalpage}
                        className="custom-pagination-with-icon"
                        current={page}
                        locale={{
                            prevText: (<span className="arrow-align"><Icon type="left" />上一页</span>),
                            nextText: (<span className="arrow-align">下一页<Icon type="right" /></span>),
                        }}
                        style={{
                            position:'relative',
                            
                            width:'100%'
                                       
                        }}
                        onChange={on_page_change}
                        
                        />
            </Spin>
        </Fragment>
    )
}

export default SearchPeople